
<template>
  <div class="background-gray" id="carfri_meetLists">
    <!--<icar-header bgColor="#F7F7F7" mainText="车友会" textColor="#474747">
      <img :src="left" v-tap="{methods: goBack}">
    </icar-header>-->
    <magic-header titleName="车友会"></magic-header>
    <div></div>
    <form class="search" onsubmit="return false">
      <input type="search" id="searchFleet" v-model="searchValue" placeholder="搜索" @keydown="goSearch" autocomplete="off">
    </form>
    <empty class="empty" v-if="meetLists.length === 0" message="暂时没有车友会"></empty>
    <ul v-else>
      <li class="main" v-for="item in meetLists">
        <mu-row gutter v-tap="{methods: checkDetail, meetId: item.id}">
          <mu-col width="35" class="img">
            <img :src="item.head ? addPath(item.head) : defaultImg" height="100px" width="100%">
          </mu-col>
          <mu-col width="65" class="content">
            <div>
              <h4>{{item.name}}</h4>
            </div>
            <div>
              <p>简介：{{item.remark}}</p>
            </div>
            <div v-if="item.fleetType === '0'">
              <span>会员数：{{item.memberCount}}</span>
            </div>
            <div v-if="item.fleetType === '1'">
              <span>车辆数：{{item.carCount}}</span>
            </div>
          </mu-col>
        </mu-row>
        <mu-raised-button v-if="item.type==1" @click="sign(item.id)" :id="'fleetId_'+item.id" :label="(item.signState==1)?'已签到':'签到'" :disabled="(item.signState==1)?true:false"></mu-raised-button>
      </li>
    </ul>
  </div>
</template>

<script>
import magicHeader from "components/magicHeader";
import left from "assets/left-gray.svg";
import empty from "components/empty-page.vue";
import defaultImg from "assets/default_user_icon.png";
import Loadmore from "components/loadmore";
// services
import QueryFleetListService from "services/carFriend/QueryFleetList";
import SignService from "services/carFriend/Sign";

export default {
  name: "carfri_meetLists",
  components: {
    magicHeader,
    empty,
    loadMore: Loadmore
  },
  data() {
    return {
      left,
      defaultImg,
      meetLists: [],
      allLoaded: false,
      searchValue: "",
      id: "",
      hasSign: false,
      memberPosition: "",
      disbaled: false
    };
  },
  methods: {
    sign(id) {
      this.$.mark().then(res => {
        this.memberPosition = JSON.parse(res);
        this.signState(id);
      });
    },
    signState(id) {
      (this.id = id),
        SignService.bind(this)(
          {
            searchValue: "",
            fleetId: id,
            memberPosition: this.memberPosition.address,
            pageable: {
              pageNumber: 1,
              pageSize: 100
            }
          },
          resp => {
            console.log(document.getElementById("fleetId_" + this.id));
            document.getElementById(
              "fleetId_" + this.id
            ).children[0].innerText =
              "已签到";
            this.hasSign = true;
            console.log("签到成功");
            this.refList();
          }
        );
    },
    // 下拉刷新
    loadBottom() {
      this.getList();
    },
    // 获取车友会列表数据
    getList(searchValue) {
      let _self = this;
      QueryFleetListService.bind(this)(
        {
          searchValue: searchValue
        },
        resp => {
          // pageable.pageNumber++
          _self.meetLists = [];
          console.log(resp.fleets);
          setTimeout(() => {
            _self.meetLists = resp.fleets;
          }, 10);
        }
      );
    },
    refList() {
      let _self = this;
      QueryFleetListService.bind(this)({}, resp => {
        // pageable.pageNumber++
        _self.meetLists = [];
        console.log(resp.fleets);
        _self.meetLists = resp.fleets;
      });
    },
    // 查看车友会详情
    checkDetail(params) {
      this.$router.push({
        name: "carFri_meetDetail",
        params: {
          meetId: params.meetId
        }
      });
    },
    // 搜索车友会
    goSearch(e) {
      if (event.keyCode === 13) {
        document.getElementById("searchFleet").blur();
        this.getList(this.searchValue);
      }
    }
  },
  created() {
    // 判断是否进行搜索
    QueryFleetListService.bind(this)(
      {
        searchValue: ""
      },
      resp => {
        this.meetLists = resp.fleets;
      }
    );
  }
};
</script>
<style scoped>
#carfri_meetLists {
  /*margin-bottom: 50px;*/
  position: relative;
}
#carfri_meetLists .search {
  width: 100%;
  background-color: #c9c9ce;
  padding: 6px 10px;
}
#carfri_meetLists .search input {
  width: 100%;
  display: block;
  /*border-radius: 5px;*/
  height: 30px;
  line-height: 30px;
  outline: none;
  text-align: center;
  border: none;
  border-radius: 10px;
  background: url(../../assets/search.svg) no-repeat 15px;
  background-color: #fff;
}
#carfri_meetLists .main {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 7px 10px;
  padding-right: 5px;
  position: relative;
}
#carfri_meetLists .main button {
  position: absolute;
  top: 67%;
  right: 5%;
  border: solid 1px #abaaa8;
  width: 55px;
  height: 30px;
  background-color: #fff;
}
#carfri_meetLists .main button {
  position: absolute;
  top: 67%;
  right: 5%;
  border: solid 1px #abaaa8;
}
#carfri_meetLists .main .content div {
  padding-top: 10px;
}
#carfri_meetLists .main .content div span {
  margin-right: 15px;
}
#carfri_meetLists h4 {
  font-size: 15px;
  color: #414141;
}
#carfri_meetLists p {
  color: #666666;
  font-family: Arial, Helvetica, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>